<template>
    <van-tabbar route v-model="active">
        <van-tabbar-item icon="gem-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/classify">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o" to="/shopp">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o" to="/mine">我</van-tabbar-item>
    </van-tabbar>
    <div class="container">
        <div class="box">
            <img src="http://gankai.gitee.io/vue-jd-h5/img/store-new.9ed79eb9.png">
            <ul>
                <li class="oli1">钻石王老五</li>
                <li class="oli2">
                    <span class="ospan1">分享节点</span>
                    <span class="ospan2">商家节点</span>
                </li>
            </ul>
        </div>
        <div class="my_info">
            <ul>
                <li>
                    <b>09</b>
                    <span>商品关注</span>
                </li>
                <li>
                    <b>09</b>
                    <span>店铺关注</span>
                </li>
                <li>
                    <b>09</b>
                    <span>我的足迹</span>
                </li>
            </ul>
        </div>
        <div class="order_all">
            <span class="show_order">查看全部订单>></span>
            <ul>
                <li>
                    <img src="../../public/svg-icons/svgs/pending-pay.svg">
                    <span>待付款</span>
                </li>
                <li>
                    <img src="../../public/svg-icons/svgs/be-delivered.svg">
                    <span>待发货</span>
                </li>
                <li>
                    <img src="../../public/svg-icons/svgs/pending-receipt.svg">
                    <span>待收货</span>
                </li>
                <li>
                    <img src="../../public/svg-icons/svgs/all-orders.svg">
                    <span>退换/售后</span>
                </li>
            </ul>
        </div>
        <div class="mine_content">
            <ul>
                <li>
                    <div class="item_info">
                        <img src="../../public/svg-icons/svgs/my-assets.svg">
                        <span>我的钱包</span>
                    </div>
                    <i class="van-icon van-icon-arrow" style="color:rgb(219,219,219);"></i>
                </li>
                <li>
                    <div class="item_info">
                        <img src="../../public/svg-icons/svgs/node-application.svg">
                        <span>节点申请</span>
                    </div>
                    <i class="van-icon van-icon-arrow" style="color:rgb(219,219,219);"></i>
                </li>
                <li>
                    <div class="item_info">
                        <img src="../../public/svg-icons/svgs/businessmen-stationed.svg">
                        <span>商家入驻</span>
                    </div>
                    <i class="van-icon van-icon-arrow" style="color:rgb(219,219,219);"></i>
                </li>
                <li>
                    <div class="item_info">
                        <img src="../../public/svg-icons/svgs/sharing-links.svg">
                        <span>分享链接</span>
                    </div>
                    <i class="van-icon van-icon-arrow" style="color:rgb(219,219,219);"></i>
                </li>
            </ul>
        </div>
        <div class="mine_content">
            <ul>
                <li>
                    <div class="item_info">
                        <img src="../../public/svg-icons/svgs/shipping-address.svg">
                        <span>收货地址</span>
                    </div>
                    <i class="van-icon van-icon-arrow" style="color:rgb(219,219,219);"></i>
                </li>
                <li>
                    <div class="item_info">
                        <img src="../../public/svg-icons/svgs/message-center.svg">
                        <span>消息中心</span>
                    </div>
                    <i class="van-icon van-icon-arrow" style="color:rgb(219,219,219);"></i>
                </li>
                <li>
                    <div class="item_info">
                        <img src="../../public/svg-icons/svgs/help-center.svg">
                        <span>帮助中心</span>
                    </div>
                    <i class="van-icon van-icon-arrow" style="color:rgb(219,219,219);"></i>
                </li>
                <li>
                    <div class="item_info">
                        <img src="../../public/svg-icons/svgs/setting.svg">
                        <span>设置</span>
                    </div>
                    <i class="van-icon van-icon-arrow" style="color:rgb(219,219,219);"></i>
                </li>
            </ul>
        </div>
    </div>
    <div class="redRoue" v-show="shopStore.isHidden">{{ shopStore.shopList.length }}</div>
</template>

<script setup>
import { ref } from 'vue'
import { useShopStore } from '../store/shop'
const shopStore = useShopStore()
let active = ref(0)
</script>

<style lang="scss" scoped>
body {
    overflow: hidden;
}

.redRoue {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #d8182d;
    position: fixed;
    bottom: 67px;
    right: 32%;
    z-index: 100;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

.container {
    width: 750px;
    height: 1525px;
    box-sizing: border-box;
    padding: 0.8rem 0.4rem 1.33333rem;
    background: linear-gradient(#fe4f70, #ff9351);

    .box {
        display: flex;
        padding-left: 0.64rem;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        padding-bottom: 0.533333rem;

        ul {
            padding-left: 0.426667rem;
            font-size: 0.4rem;
            color: rgb(255, 255, 255);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            .oli1 {
                font-size: 0.4rem;
                color: rgb(255, 255, 255);
            }

            .oli2 {
                padding-top: 0.133333rem;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .ospan2 {
                    margin-left: 0.133333rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 1.6rem;
                    height: 0.586667rem;
                    font-size: 0.293333rem;
                    text-align: center;
                    background-color: rgb(113, 192, 246);
                    border-radius: 0.293333rem;
                }

                .ospan1 {
                    padding-left: 0.48rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 2.08rem;
                    height: 0.666667rem;
                    font-size: 0.293333rem;
                    text-align: center;
                    background: url() 50% center / 100% 100% no-repeat;
                    border-radius: 0.293333rem;
                }
            }
        }

        img {
            width: 1.86667rem;
            height: 1.86667rem;
            display: block;
        }
    }

    .my_info {
        font-size: 0.346667rem;
        color: rgb(255, 255, 255);
        padding-bottom: 0.426667rem;
        box-sizing: border-box;

        ul {
            display: flex;
            justify-content: space-around;
            align-items: center;

            li {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                b {
                    font-size: 0.426667rem;
                }
            }
        }
    }

    .order_all {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0.133333rem 0.4rem 0px;
        display: flex;
        flex-direction: column;
        background-color: rgb(255, 255, 255);
        border-radius: 0.213333rem;

        ul {
            padding-bottom: 0.48rem;
            display: flex;
            justify-content: space-around;
            align-items: center;

            li {
                font-size: .373333rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                img {
                    width: 0.64rem;
                    height: 0.64rem;

                    display: block;
                }

                span {
                    padding-top: 0.133333rem;
                    font-weight: 600;
                }
            }
        }

        .show_order {
            font-size: .293333rem;
            font-weight: 600;
            color: #3a3a3a;
            padding-left: 0.506667rem;
            padding-top: 0.373333rem;
            padding-bottom: 0.48rem;
        }
    }

    .mine_content {
        box-shadow: 0 0.133333rem 0.4rem 0 rgba(0, 0, 0, .1);
        background-color: #fff;
        border-radius: 0.213333rem;
        padding: 0 0.426667rem;
        margin-top: 0.48rem;

        ul {
            padding-top: 0.533333rem;

            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: .426667rem;
                padding-bottom: 0.586667rem;

                .item_info {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: .4rem;
                    color: #888;

                    img {
                        width: 0.64rem;
                        height: 0.64rem;
                        display: block;
                        padding-right: 0.426667rem;
                    }
                }
            }
        }
    }
}
</style>